<template>
  <div>
    <el-menu default-active="2" router :style="{ backgroundColor: '#304156', color: '#fff' }">

      <el-submenu :index="item.index" v-for="item in menus" :key="item.index">
        <template slot="title">
          <i :class="item.incon"></i>
          <span>{{item.title}}</span>
        </template>
        <el-menu-item-group>

          <el-menu-item :index="item.index" v-for="item in item.children" :key="item.index">
            {{item.title}}
          </el-menu-item>
          
        </el-menu-item-group>
      </el-submenu>
      
    </el-menu>
  </div>
</template>

<script>
export default {
    data(){
        return{
            menus:[
                {
                  index:'1',
                  title:'充值管理',
                  incon:'el-icon-user-solid',
                  children:[
                    {
                        index:"/finance/findBoss",
                        title:'老板列表'
                    },
                  ]
                },
                {
                  index:'2',
                  title:'资金流水',
                  incon:'el-icon-money',
                  children:[
                    {
                        index:"/finance/allPlaymateFlowRecord",
                        title:'陪玩流水'
                    },
                    {
                        index:"/finance/allBossFlowRecord",
                        title:'老板流水'
                    }
                  ]
                },
                {
                  index:'3',
                  title:'报表管理',
                  incon:'el-icon-document',
                  children:[
                    {
                      index:"/finance/platformReports",
                      title:'资金流水报表'
                    },
                  ]
                },
                {
                  index:'4',
                  title:'提现审核',
                  incon:'el-icon-bank-card',
                  children:[
                    {
                      index:"/finance/findPlaymate",
                      title:'陪玩列表'
                    },
                    {
                      index:"/finance/playmateWithdrawal",
                      title:'审核陪玩'
                    },
                  ]
                }
            ]
        }
    },
}
</script>

<style  scoped>
:deep() .el-submenu__icon-arrow {
  display: none !important;
}
:deep() .el-menu {
  padding: 0;
  border-right: none;
  background-color: #304156; /* 设置为与主题相同的颜色 */
}

:deep() .el-menu-item,
:deep() .el-submenu__title {
  padding-left: 20px;
  text-align: left;
  color: #fff; /* 设置文字颜色为白色，以确保在深色背景下可见 */
}
/* 设置悬停效果为蓝色 */
:deep() .el-menu-item:hover,
:deep() .el-submenu__title:hover {
  background-color: rgba(0, 123, 255, 0.2) !important; /* 使用半透明蓝色 */
  color: #fff !important; /* 保持文字颜色不变 */
}
</style>